<template>
    <div class="login">
        <round></round>
        <div>
            <div>
                <label for="username">姓名:</label> <input type="text" name="username" @keyup.enter.native='login' v-model="username">
            </div>
            <div>
                <label for="password">密码:</label> <input type="text" name="password" @keyup.enter.native='login' v-model="password">
            </div>
            <div>
                <button @click="login">登录</button>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
/**
 * @Author dingxing [2022-08-09 16:46:03]
 * @Description 
 */
// 引入自定义 消息提示
import round from '@/views/login/round'
import Message from '../../components/Message'
export default {
    name: '',
    components: {
        round
    },

    props: {},

    data() {
        return {
            username: 'wang',
            password: '123456'
        }
    },

    watch: {
    },

    created() {

    },

    mounted() {
    },

    methods: {
        login() {
            if (!this.password || !this.username) {
                return Message({
                    message: "不能为空",
                    type: 'error'
                })
            }
            // 调接口
            this.$http.get('/login', {
                username: this.username,
                password: this.password,
            }).then((res) => {
                let result = res.data;
                if (result.code == 1) {
                    Message({
                        message: "登录成功",
                        type: 'success'
                    })
                    // 登录成功跳转页面
                    this.$router.push('/home/index')
                } else {
                    Message({
                        message: "登录失败",
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style lang='less' scoped>
.login {
    width: 100%;
    height: 100vh;
    text-align: center;
    position: relative;
    background: url('../../assets/img/1.jpg') no-repeat;
    background-size: cover;
    > div {
        position: absolute;
        font-size: 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    input {
        border: solid rgb(35, 114, 163) 1px;
        margin: 10px 20px;
        display: inline-block;
        padding: 5px 20px;
    }
    button {
        padding: 5px 15px;
        background: #b5d0d0;
        border: solid 1px #7ecfd4;
        cursor: pointer;
        &:active {
            transform: scale(1.1);
        }
    }
}
</style>